<template>
  <div class="cardGroup" >
    <div class="" v-for="i in cardList">
      <div class="wcard" :class="iszoom?'z70':''">
        <div class="flex jcsb">
          <div class="flex aic">
            <span class="titleName mgr8 lmName">{{ i.name }}</span>
            <span><van-icon name="comment" class="c9 dis500" /></span>
          </div>
          <div class="corg">{{ i.money }}</div>
        </div>
        <div class="fs14 c9 ndis500">
          <span class="mgr8 lmName">{{ i.comName }}</span>
          <span>{{ i.city }}</span>
        </div>
        <div class="mgt10 tagGroup">
          <div class="mainTag" v-for="j in i.tag">{{ j }}</div>
        </div>
        <div class="mgt40 fs14 flex jcsb c6 dis500">
          <div class="flex aic">
            <span><van-icon :name="i.icon" class="c9 mgr8" size="25" /></span>
            <span class="lmName namew">{{ i.name }}</span>
          </div>
          <div class="flex">
            <div>{{ i.type }}</div>
            <span class="mgl8 mgr8 c9">|</span>
            <div>{{ i.state }}</div>
          </div>
        </div>
        <div class="mgt20 fs12 flex jcsb ndis500">
          <div class="flex aic">
            <span class="mgr8"><van-icon :name="i.manIcon" size="25" /></span>
            <span>{{ i.fman }}·{{ i.role }}</span>
          </div>
          <div class="btn">立即沟通</div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
@import "../../public.css";
@import "../../ui/vant-ui/ui.css";
.cardGroup{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.wcard {
  border: 1px solid #cec8c865;
  width: 288px;
  height: 120px;
  padding: 16px 20px;
  margin: 10px;
  border-radius: 8px;
  background-color: #fff;
}
.z70{
  zoom: 80%;
}
.corg {
  color: orange;
}
.tagGroup {
  white-space: normal;
  padding-right: 0;
  height: 22px;
  line-height: 22px;
  overflow: hidden;
  word-break: break-all;
  max-width: none;
}
.mainTag {
  display: inline;
  padding: 5px;
  border-radius: 5px;
  margin-right: 10px;
  background-color: #eeeeee65;
  color: #666;
  letter-spacing: 0;
  font-size: 12px;
}
.titleName {
  max-width: 120px;
  color: #000;
  font-size: 18px;
}
.btn {
  display: inline;
  padding: 5px 16px;
  font-size: 13px;
  border-radius: 10px;
  background-color: var(--primary-color);
  color: #fff;
}
.namew {
  width: 120px;
}
.lmName {
  white-space: pre-wrap;
  word-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 500px) {
  .cardGroup{
  flex-direction: row !important;
  justify-content: start !important;
  flex-wrap: wrap;
}
  .titleName {
    color: var(--primary-color) !important;
  }
}
</style>
<script>
module.exports = {
  data() {
    return {
    };
  },
  props: {
    cardList: {
      type: Array,
      default: function () {
        return [
          {
            name: "游戏与港元游戏与港元游戏与港元",
            money: "4-7k",
            city: "阳江",
            tag: [
              "阳江",
              "经验不限",
              "学历不限",
              "短视频/直播营销",
            ],
            icon: "vip-card-o",
            comName: "心有网络啊飒飒撒发顺丰",
            type: "游戏",
            state: "未融资",
            manIcon: "vip-card-o",
            fman: "廖先生",
            role: "招聘者",
          },
          {
            name: "游戏与港元",
            money: "4-7k",
            city: "阳江",
            tag: ["阳江", "经验不限", "学历不限", "短视频/直播营销"],
            icon: "vip-card-o",
            comName: "心有网络",
            type: "游戏",
            state: "未融资",
            manIcon: "vip-card-o",
            fman: "廖先生",
            role: "招聘者",
          },
          {
            name: "游戏与港元",
            money: "4-7k",
            city: "阳江",
            tag: ["阳江", "经验不限", "学历不限", "短视频/直播营销"],
            icon: "vip-card-o",
            comName: "心有网络",
            type: "游戏",
            state: "未融资",
            manIcon: "vip-card-o",
            fman: "廖先生",
            role: "招聘者",
          },
          {
            name: "游戏与港元",
            money: "4-7k",
            city: "阳江",
            tag: ["阳江", "经验不限", "学历不限", "短视频/直播营销"],
            icon: "vip-card-o",
            comName: "心有网络",
            type: "游戏",
            state: "未融资",
            manIcon: "vip-card-o",
            fman: "廖先生",
            role: "招聘者",
          },
          {
            name: "游戏与港元",
            money: "4-7k",
            city: "阳江",
            tag: ["阳江", "经验不限", "学历不限", "短视频/直播营销"],
            icon: "vip-card-o",
            comName: "心有网络",
            type: "游戏",
            state: "未融资",
            manIcon: "vip-card-o",
            fman: "廖先生",
            role: "招聘者",
          },
          {
            name: "游戏与港元",
            money: "4-7k",
            city: "阳江",
            tag: ["阳江", "经验不限", "学历不限", "短视频/直播营销"],
            icon: "vip-card-o",
            comName: "心有网络",
            type: "游戏",
            state: "未融资",
            manIcon: "vip-card-o",
            fman: "廖先生",
          },
        ];
      },
    },
    iszoom:{
      type:Boolean,
      default:false,
    }
  },
  methods: {},
};
</script>
